<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01 表单验证</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    .normal {
        color: blue;
    }

    .error {
        color: red;
    }

    .success {
        color: greenyellow;
    }
</style>

<body>
    <div id="app">
        <p>
            <label for="">用户名&emsp;</label>
            <input type="text" v-model="user">
            <span :class="usertipstyle">{{usertip}}</span>
        </p>
        <p>
            <label for="">手机号&emsp;</label>
            <input type="text" v-model="phone">
            <span :class="phonetipstyle">{{phonetip}}</span>
        </p>
        <p>
            <label for="">密&emsp;&emsp;码</label>
            <input type="text" v-model="pwd">
            <span :class="pwdtipstyle">{{pwdtip}}</span>
        </p>
        <p>
            <label for="">确认密码</label>
            <input type="text" v-model="repwd">
            <span :class="repwdtipstyle">{{repwdtip}}</span>
        </p>
        <p>
            <button @click="register">注册</button>
        </p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: "",
            userreg: /^[a-z_$][0-9a-z_$]{5,11}$/i,
            usertip: "请输入长度6到12位只能由数字字母_$组成并且不能以数字开头",
            usertipstyle: "normal",
            isuser: false,

            phone: "",
            phonereg: /^[1]([3-9])[0-9]{9}$/,
            phonetip: "请输入长度为11位的手机号码",
            phonetipstyle: "normal",
            isphone: false,

            pwd: "",
            pwdreg: /^[0-9a-zA-Z!@^#&$]{6,18}$/,
            pwdtip: "请输入6-18位 ，由数字、大写字母、小写字母、特殊字符组成的密码",
            pwdtipstyle: "normal",
            ispwd: false,

            repwd: "",
            repwdtip: "请再次输入密码",
            repwdtipstyle: "normal",
            isrepwd: false,

        },
        methods: {
            register() {
                if(this.isuser && this.isphone && this.ispwd && this.isrepwd){
                    alert("注册成功！")
                }else{
                    alert("请注意红色信息")
                }
            },

            checkAttr(attr) {
                if (this[attr + "reg"].test(this[attr])) {
                    this[attr + "tipstyle"] = "success";
                    this[attr + "tip"] = "√";
                    this["is" + attr] = true;
                } else {
                    this[attr + "tipstyle"] = "error"
                    this[attr + "tip"] = "请输入长度6到12位只能由数字字母_$组成并且不能以数字开头";
                }
            },
            checkPwd(attr) {
                if (this.pwdreg.test(this.pwd)) {
                    this.pwdtip = "√";
                    this.pwdtipstyle = "success";
                    this.ispwd = true;
                }
                else {
                    this.pwdtip = "请输入6-18位 ，由数字、大写字母、小写字母、特殊字符组成的密码";
                    this.pwdtipstyle = "error";
                }
            },
            checkPwdre(attr) {

                if (this.pwd) {
                    if (this.pwd == this.repwd) {
                        this.repwdtip = "√";
                        this.repwdtipstyle = "success";
                        this.isrepwd = true;
                    } else {
                        this.repwdtip = "两次密码输入不一致，请重新输入";
                        this.repwdtipstyle = "error";
                    }
                }
                else {
                    this.repwdtip = "请先输入密码";
                    this.repwdtipstyle = "error";
                }


            }





        },
        watch: {
            user() {
                this.checkAttr("user")
            },
            phone() {
                this.checkAttr("phone")
            },
            pwd(){
                this.checkPwd("pwdre")
            },
            repwd(){
                this.checkPwdre("repwd")
            }
            

        }
    })


</script>

</html>